<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增课件管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>


</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-ware-add" enctype="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-3 control-label">目录：</label>
            <div class="col-sm-8">

                <input name="courseId" id="courseId" class="form-control" th:value="${course.courseId}" type="hidden">
                <input name="courseName" id="courseName" class="form-control" th:value="${course.name}" type="hidden">
                <input name="folderId" id="folderId" class="form-control" th:value="${folder.folderId}" type="hidden">
                <input name="folderName" id="folderName" th:value="${folder.folderName}" onclick="selectFolderTree()"
                       class="form-control" type="text"
                       readonly required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">课件名称：</label>
            <div class="col-sm-8">
                <select name="isWare" class="form-control m-b">
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课件名称：</label>
            <div class="col-sm-8">
                <input id="wareName" name="wareName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">缩略图：</label>
            <div class="col-sm-8">
<!--                <input type="hidden" name="thumb" th:field="*{thumb}"/>-->
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                         style="width: 200px; height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">选择图片</span>
                            <span class="fileinput-exists">更改</span>
                            <input id="thumb" name="thumb" type="file"/>
                        </span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
                <!--                <input name="thumb" class="form-control" type="text">-->
                <!--                <div class="file-loading">-->
                <!--                    <input class="form-control file-upload" id="thumb" name="file" type="file">-->
                <!--                </div>-->
            </div>
        </div>
        <!--            <div class="form-group">-->
        <!--                <label class="col-sm-3 control-label">文件ID：</label>-->
        <!--                <div class="col-sm-8">-->
        <!--                    <input name="fileId" class="form-control" type="text">-->
        <!--                </div>-->
        <!--            </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">文件上传：</label>
            <div class="col-sm-8">
                <input type="hidden" name="filePath" th>
                <!--                <div class="file-loading">-->
                <input class="form-control file-upload" id="filePath" name="file" type="file" required>
                <!--                </div>-->
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script th:inline="javascript">
    var courseId = [[${course.courseId}]];
    var prefix = ctx + "teaching/ware"
    $("#form-ware-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var formData = new FormData();
            if ($('#thumb')[0].files[0] == null) {
                $.modal.alertWarning("请先选择缩略图");
                return false;
            }
            if ($('#filePath')[0].files[0] == null) {
                $.modal.alertWarning("请先选择文件路径");
                return false;
            }
            formData.append("courseId", $("#courseId").val());
            formData.append("courseName", $("#courseName").val());
            formData.append("folderId", $("#folderId").val());
            formData.append("folderName", $("#folderName").val());
            formData.append("wareName", $("#wareName").val());
            formData.append("thumbFile", $('#thumb')[0].files[0]);
            formData.append("file", $('#filePath')[0].files[0]);
            $.ajax({
                url: prefix + "/add",
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (result) {
                    $.operate.successCallback(result);
                }
            });

            // $.operate.save(prefix + "/add", $('#form-ware-add').serialize());
        }
    }

    /*课程目录-新增-选择父课程目录树*/
    function selectFolderTree() {
        console.log($("#folderId").val());
        var options = {
            title: '课程目录选择',
            width: "380",
            url: ctx + "teaching/folder/selectFolderTree/" + $("#folderId").val() + "?courseId=" + courseId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = $.modal.getChildFrame(index);
        $("#folderId").val(body.find('#treeId').val());
        $("#folderName").val(body.find('#treeName').val());
        $.modal.close(index);
    }

    $("input[name='uploadTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
</script>
</body>
</html>
